<template>
  <div class="resume-container">
    <section class="page-resume">
      <el-row>
        <el-col :xs="24" :sm="10" :md="8" :lg="8">
          <SideWrap :base="base" :contact="contact" />
        </el-col>

        <el-col :xs="24" :sm="14" :md="16" :lg="16" class="el-col-rel">
          <MainWrap
            :education="education"
            :workExperience="workExperience"
            :myGit="myGit"
            :skills="skills"
            :certificate="certificate"
          />
        </el-col>
      </el-row>
    </section>
    <ControlLang />
  </div>
</template>

<script>
import { Row, Col } from 'element-ui';
import ControlLang from '@/components/control-lang.vue';
import SideWrap from '@/components/side-wrap/index.vue';
import MainWrap from '@/components/main-wrap/index.vue';
export default {
  components: {
    'el-row': Row,
    'el-col': Col,
    ControlLang,
    SideWrap,
    MainWrap,
  },
  data() {
    return {
      showNav: false,
      base: {
        name: this.$t('base.data.name'),
        avatar: '/img/avatar.jpg',
        summary: this.$t('base.data.summary'),
        education: this.$t('base.data.education'),
        seniority: this.$t('base.data.seniority'),
      },

      contact: {
        phone: '16602835945',
        email: 'yinlinshengxiao@gmail.com',
        github: 'https://github.com/Fridolph',
        homepage: 'http://blog.fridolph.wang',
        wechat: '/img/wechat.png',
      },

      education: [
        {
          universityAndMajor:
            this.$t('education.data.universicy') +
            ' / ' +
            this.$t('education.data.major'),
          time: '2012.09——2016.06',
        },
      ],
      workExperience: [
        {
          company: this.$t('experience.wskp.company'),
          time: this.$t('experience.wskp.time'),
          desc: this.$t('experience.wskp.desc'),
          list: [
            this.$t('experience.wskp.l1'),
            this.$t('experience.wskp.l2'),
            this.$t('experience.wskp.l3'),
            this.$t('experience.wskp.l4'),
            this.$t('experience.wskp.l5'),
            this.$t('experience.wskp.l6'),
          ],
          ret: [
            this.$t('experience.wskp.r1'),
            this.$t('experience.wskp.r2'),
            this.$t('experience.wskp.r3'),
          ],
        },
        {
          company: this.$t('experience.aili.company'),
          time: this.$t('experience.aili.time'),
          desc: this.$t('experience.aili.desc'),
          list: [
            this.$t('experience.aili.l1'),
            this.$t('experience.aili.l2'),
            this.$t('experience.aili.l3'),
          ],
        },
      ],
      myGit: [
        {
          name: 'my-program',
          url: 'https://github.com/Fridolph/my-program',
          desc: this.$t('project.myPro.desc'),
        },
        {
          name: 'vue-where-go',
          url: 'https://github.com/Fridolph/vue-where-go',
          desc: this.$t('project.vueGo.desc'),
        },
        {
          name: 'react-job-h5',
          url: 'https://github.com/Fridolph/react-job-h5',
          desc: this.$t('project.reacth5.desc'),
        },
      ],
      skills: [
        {
          name: this.$t('skills.fe.title'),
          list: [
            this.$t('skills.fe.l1'),
            this.$t('skills.fe.l2'),
            this.$t('skills.fe.l3'),
            this.$t('skills.fe.l4'),
            this.$t('skills.fe.l5'),
            this.$t('skills.fe.l6'),
            this.$t('skills.fe.l7'),
            this.$t('skills.fe.l8'),
            this.$t('skills.fe.l9'),
          ],
        },
        {
          name: this.$t('skills.other.title'),
          list: [
            this.$t('skills.other.l1'),
            this.$t('skills.other.l2'),
            this.$t('skills.other.l3'),
            this.$t('skills.other.l4'),
            this.$t('skills.other.l5'),
            this.$t('skills.other.l6'),
          ],
        },
      ],
      certificate: [
        {
          name: this.$t('other.certificate.c1'),
          desc: this.$t('other.certificate.c1desc'),
        },
        {
          name: this.$t('other.certificate.c2'),
        },
        {
          name: this.$t('other.certificate.c3'),
        },
        {
          name: this.$t('other.certificate.c4'),
        },
      ],
    };
  },
  mounted() {
    // let dom = document.querySelector('.main-wrapper')
    // dom.addEventListener('scroll', e => {
    //   console.log('event', e);
    //   if (e.target.scrollTop > 200) {
    //     this.showNav = true
    //   } else {
    //     this.showNav = false
    //   }
    // }, false)
  },
  methods: {
    // navTo(selectorName) {
    //   console.log('selectorName', selectorName);
    //   let offsetTop = document.querySelector(`#${selectorName}`).offsetTop
    //   let dom = document.querySelector('.main-wrapper')
    //   dom.scrollTop = offsetTop - 36
    // }
  },
};
</script>

<style lang='stylus'>
@import '~@/assets/style/mixin.styl';
.page-resume
  &.el-row
    box-shadow: 4px 4px 20px rgba(0,0,0,0.1)
    transition: all 0.6s ease
    &:hover
      box-shadow: 6px 6px 12px rgba(0,0,0,0.15)

  .common-dl
    margin-bottom 20px
    color #607d8b
    line-height 1.5
    &:hover
      dt
        &::after
          width 100%
    p
      color #779daf
    dt
      height 40px
      line-height 36px
      padding-bottom 9px
      border-bottom 1px solid #ede9e2
      margin-bottom 15px
      font-weight bold
      position relative
      &::after
        content ''
        position absolute
        left 0
        bottom 0
        width 0
        height 1px
        background-color #bfcbd0
        transition all ease 0.7s
      .iconfont
        color #607d8b
        font-size 24px
        font-weight bold
      i, em
        display inline-block
        vertical-align middle
      i
        margin-right 10px
    dd
      font-size 14px
      margin-bottom 15px
      word-break break-word
      text-align justify
      h4
        position relative
        margin-bottom 5px
        span
          display block
          width calc(100% - 140px)
        time
          display inline-block
          font-weight normal
          position absolute
          right 0
          top 0
      span, strong
        display inline-block
        vertical-align top
      span
        width 90px
      strong
        font-weight normal
      a
        color #607d8b
        &:hover
          text-decoration underline

.el-col-rel
  position relative
  .navigator
    position absolute
    top 0
    z-index 20
    text-indent 20px
    background linear-gradient(to bottom, #fff 70%, transparent 100%)
    display block
    width calc(100% - 6px)
    line-height 36px
    padding-bottom 10px
    a
      margin-right 8px
      font-size 13px
      .iconfont
        vertical-align top
      .icon-peixunjiaoyu
        font-size 18px
      .icon-gongzuoxinxi
        font-size 18px
      .icon-xiangmu
        font-size 12px
      .icon-zhuanyezhishijineng
        font-size 16px


@media screen and (max-width: 415px)
  .page-resume
    .common-dl
      dd
        h4
          display flex
          flex-wrap wrap
          span
            display inline-block
            width auto
          time
            display: inline-block
            position: static

@media screen and (min-width: 768px)
  .page-resume
    .side-wrapper
      height: 100vh
      padding 20px 21px 20px 20px
      .list-wrapper
        height: calc(100% - 262px)
        overflow: hidden
      &:hover
        padding-right 15px
        .list-wrapper
          overflow-y: auto
          scrollBar()
        .hero-box
          padding-right 6px

    .main-wrapper
      height: 100vh;
      overflow: hidden;
      overflow-y: auto;
      scrollBar();

@media screen and (min-width: 992px)
  .page-resume
    padding: 5vh 5%
    .side-wrapper
      height: 90vh
    .main-wrapper
      height: 90vh
      overflow hidden
      padding-right 26px
      &:hover
        overflow-y auto
        padding-right 20px

@media screen and (min-width: 1600px)
  .page-resume
    padding: 7vh 7%
    .side-wrapper
      height: 86vh
    .main-wrapper
      height: 86vh
</style>
